<template>
	<div v-if="showPage">
		<div class="module-header">		
			<div class="module-prompt f-left">分类列表</div>
			<el-button class="f-right" type="danger" size="small" @click="addTopCategory">新增一级分类</el-button>
		</div>
		<div class="cate-box">
			<div class="text-danger" v-if="categoryList.length == 0">暂无分类，快去添加吧！</div>
			<div class="cate-list" v-else v-for="(item,index) in categoryList">
				<div class="cate-title">
					<el-input
					  class="input-new-tag"
					  v-if="item.showEdit"
					  v-model="item.editValue"
					  ref="saveTagInput"
					  size="small"
					  @keyup.enter.native="updateCategory(item)"
					  @blur="cancelOpt(item)">
					</el-input>
					<span v-else @click="item.showEdit = true">
						<el-tag
						  :key="item.name"
						  closable
						  @close="delTopCategory(item.id,categoryList,index)"
						  type="danger">
						  {{item.name}}
						</el-tag>
					</span>
				</div>
				<div class="cate-label-box">
					<div class="cate-label-list">
						<div class="label-list" v-for="(tag,index1) in item.children">
							<el-input
								:autofocus="true"
							  class="input-new-tag"
							  v-if="tag.showEdit"
							  v-model="tag.editValue"
							  ref="saveTagInput"
							  size="small"
							  @keyup.enter.native="updateCategory(tag)"
							  @blur="cancelOpt(tag)">
							</el-input>
							<span v-else @click="tag.showEdit = true">
								<el-tag
								  :key="index1"
								  closable
								  :disable-transitions="false"
								  @close="delSecondCategory(item.id,tag.id,item.children,index1)">
								  {{tag.name}}
								</el-tag>
							</span>
						</div>
						<el-input
							:autofocus="true"
						  	class="input-new-tag"
						  	v-if="item.inputVisible"
						  	v-model="item.addValue"
						  	ref="saveTagInput"
						  size="small"
						  @keyup.enter.native="addSecondCategory(item,index)"
						  @blur="cancelOpt(item,1)">
						</el-input>
						<el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+ New Tag</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import{
		userService
	}from "api"
	export default{
		data(){
			return {
				categoryList:[],
				refreshList: 0,
				showPage: false
			}
		},
		methods:{
			getCategoryList(){
				userService.getCategoryList()
				.then(res => {
					let categoryList = res
					this.showPage = true
					categoryList.forEach(item => {
						item.inputVisible = false
						item.addValue = ""
						item.showEdit = false
						item.children.forEach(item1 => {
							item1.showEdit = false
						})
					})
					this.categoryList = categoryList
				})
			},
			addTopCategory(){
		        this.$prompt('请输入一级分类名称', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		        }).then(({ value }) => {
					userService.addTopCategory({name: value,top: true})
					.then(res => {
						this.$notify({
				            message: '新增一级分类成功！',
				            type: 'success'
				        })
				       	res.inputVisible = false
						res.addValue = ""
						res.showEdit = false	
						res.children = []
						this.categoryList.push(res)
					})
		        })
			},
			addSecondCategory(item,index){
				userService.addSecondCategory(item.id,{name:item.addValue})
				.then(res => {
					this.$notify({
			            message: '新增二级分类成功！',
			            type: 'success'
			        })
			        res.showEdit = false
					this.categoryList[index].children.push(res)
					item.addValue = ""
					item.inputVisible = false
				})
			},
			updateCategory(cateObj){
				cateObj.name =  cateObj.editValue
				// return console.log(cateObj)
				userService.editCategory(cateObj.id,cateObj)
				.then(res => {
		    		this.$notify({
			            message: '更新成功！',
			            type: 'success'
			        })
					cateObj.showEdit = false
				})
			},
			cancelOpt(item,val){
				val ? item.inputVisible = false : item.showEdit = false
			},
		    showInput(item){
		    	item.addValue = ""
		    	item.inputVisible = true
		    },
		    delTopCategory(id,arr,index){
		    	this.$confirm('此操作将永久删除该分类以及子分类, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        })
		        .then(() => {
			    	userService.delTopCategory(id)
			    	.then(res => {
			    		this.$notify({
				            message: '删除成功！',
				            type: 'success'
				        })
			    		arr.splice(index,1) 
			    	})
		        })
		        .catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });

		    },
		    delSecondCategory(parentId,id,arr,index){
		    	this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
			    	userService.delSecondCategory(parentId,id)
			    	.then(res => {
			    		this.$notify({
				            message: '删除成功！',
				            type: 'success'
				        })
			    		arr.splice(index,1) 
			    	})
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        })
		    }
		},
		mounted(){
			this.refreshList++
		},
		watch:{
			"refreshList":"getCategoryList"
		}
	}
</script>	
<style scoped>
  .cate-box{
  	text-align: left;
  }
  .cate-title{
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
  }
	.label-list{
		float: left;
		margin-right: 10px;
	}
</style>